window.addEventListener("load", function () {
	// 功能一：点击我已阅读按钮勾选框  立即注册按钮变色
	$("#checkbox input").addEventListener("click", function () {
		//判断是勾选还是没勾选
		if (this.checked) {
			//如果是勾选   那么进行验证
			if (!userNameReg.test($("#userName .inp").value)) {
				// 判断用户名
				$("#userName .inp").style.border = "1px solid red";
				$("#userNameTips").style.display = "block";
				this.checked = false;
			} else if (!numberTipsReg.test($("#number .inp").value)) {
				//判断手机号
				$("#number .inp").style.border = "1px solid red";
				$("#numberTips").style.display = "block";
				this.checked = false;
			} else if (!verificationReg.test($("#verification .inp").value)) {
				//判断验证码
				$("#verification .inp").style.border = "1px solid red";
				$("#verificationTips").style.display = "block";
				this.checked = false;
			} else if (!passwordReg.test($("#password .inp").value)) {
				//判断密码
				$("#password .inp").style.border = "1px solid red";
				$("#passwordTips").style.display = "block";
				this.checked = false;
			} else {
				//进到这里说明 输入框全部正确  可以点击
				$("#btn").style.backgroundColor = "#3fcdff";
				$("#btn").style.color = "#fff";
			}
		} else {
			//没勾选 为不能点击状态
			$("#btn").style.backgroundColor = "#e0e0e0";
			$("#btn").style.color = "#7e7e7e";
		}
	});

	// 功能二：点击获取验证码禁用按钮
	$("#gain").addEventListener("click", function () {
		let time = 59; //声明一个倒计时秒数
		console.log(111);
		$("#gain").disabled = true; //点击时禁用按钮
		// 点击按钮后开启周期定时器
		let timer = setInterval(function () {
			// 判断：如果倒计时为0时清楚周期定时器，解除按钮
			if (time == 0) {
				clearInterval(timer);
				$("#gain").disabled = false; //数字为0时解除按钮
				$("#gain").innerHTML = "获取验证码";
			} else {
				$("#gain").innerHTML = `${time}秒后重新获取`; //将倒计时秒数渲染到按钮上
				time--; //每一秒倒计时秒数-1
			}
		}, 1000);
	});

	// 功能三：判断用户名输入框的值
	let userNameReg = /^[0-9a-zA-Z]{6,12}$/;
	$("#userName .inp").addEventListener("blur", function () {
		console.log(userNameReg.test(this.value));
		// 如果值小于6 大于12就显示提示文字
		if (userNameReg.test(this.value) === false) {
			// 边框变红
			this.style.border = "1px solid red";
			$("#userNameTips").style.display = "block";
		} else {
			// 如果大于6 大于12就不显示提示文字
			this.style.border = "";
			$("#userNameTips").style.display = "none";
		}
	});

	// 功能四：判断手机号输入框的值
	// $("#number .inp").addEventListener("blur", function () {
	// 	// console.log(numberTipsReg.test(this.value));
	// 	if (numberTipsReg.test(this.value) === false) {
	// 		this.style.border = "1px solid red";
	// 		$("#numberTips").style.display = "block";
	// 	} else {
	// 		this.style.border = "";
	// 		$("#numberTips").style.display = "none";
	// 	}
	// });
	let numberTipsReg = /^[1][3|4|5|6|7|8][0-9]{9}$/;
	reg("#number .inp", "#numberTips", numberTipsReg);

	// 功能五：判断验证码输入框的值
	let verificationReg = /^[0-9]{6}$/;
	reg("#verification .inp", "#verificationTips", verificationReg);

	// 功能五：判断密码输入框的值
	let passwordReg = /^[0-9a-zA-Z]{6,12}$/;
	reg("#password .inp", "#passwordTips", passwordReg);

	// 功能六：验证表单 点击提交按钮触发四个输入框的值是否正确
	// $("form").addEventListener("submit", function (e) {
	// 	if (!userNameReg.test($("#userName .inp").value)) {
	// 		// 判断用户名
	// 		$("#userName .inp").style.border = "1px solid red";
	// 		$("#userNameTips").style.display = "block";
	// 		e.preventDefault();
	// 	} else if (!numberTipsReg.test($("#number .inp").value)) {
	// 		//判断手机号
	// 		$("#number .inp").style.border = "1px solid red";
	// 		$("#numberTips").style.display = "block";
	// 		e.preventDefault();
	// 	} else if (!verificationReg.test($("#verification .inp").value)) {
	// 		//判断验证码
	// 		$("#verification .inp").style.border = "1px solid red";
	// 		$("#verificationTips").style.display = "block";
	// 		e.preventDefault();
	// 	} else if (!passwordReg.test($("#password .inp").value)) {
	// 		//判断密码
	// 		$("#password .inp").style.border = "1px solid red";
	// 		$("#passwordTips").style.display = "block";
	// 		e.preventDefault();
	// 	}
	// });
});
